<template>
	<view class="main">
		<view class="top_search">
			<search-top  placeholder="请输入关键词" @mySearch="mySearch"></search-top>
		</view>
		<view class="nav">
			<u-tabs :list="lists" active-color="#4DC0D9" font-size="36" bar-width="120" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
				<view class="tip" @click="navTip">
					<u-icon name="info-circle" size="40" color="#575B66"></u-icon>
				</view>
		</view>
		<u-modal v-model="tipsSw" title="低分口碑说明" :content="tips" :content-style="{fontWeight:500}"
			:show-cancel-button="false" confirm-text="我知道了" confirm-color="#4DC0D9" :title-style="myTitle"></u-modal>
			<view class="top_count">
				全部（{{total}}）
			</view>
			<view class="card" v-for="n in list" :key="n.id">
				<view class="name">
					<view class="">
						{{n.userName}}
					</view>
					<view class="">
						<u-rate :current="n.totalScore" :disabled="true" active-color="#F8A830" inactive-icon="star-fill"></u-rate>
					</view>
				</view>
				<view class="time">
					{{n.createTime}}
				</view>
				<view class="content">
					{{n.commentContent}}
				</view>
				<view class="start_time">
					<view class="left_time">
						就诊时间：{{n.orderTime}}
					</view>
					<view class="report" @click="report(n)" v-if="n.isFeedback == 0">
							<u-image :src="feedBack" height="36" width="36"></u-image>
						<view class="">
							申诉
						</view>
					</view>
				</view>
			</view>
			<view class="job_empty" v-if="empty">
				<view class="">
					<u-image width="335rpx" height="320rpx" :src="actionImg"></u-image>
				</view>
				<view class="empty_text">
					暂无口碑
				</view>
			</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getSysUserCommentPage
	} from '@/api/index.js'
	import pageMixin from '@/utils/pageMixin.js' //在需要引入的组件中引入
	export default {
		mixins: [pageMixin],
		data() {
			return {
				lists: [{
					name: '全部'
				},  {
					name: '差评'
				},{
					name: '申诉'
				}],
				current: 0,
				params:{
					state:0,
					searchValue:''
				},
				tipsSw:false,   //导航叹号提示
				tips:'口碑评分最高为5星，综合3星（含3星）以下为差评口碑。',
				myTitle: {
					fontWeight: 'bold'
				},
				actionImg: require('@/static/img/No_team@2x.png'),
				feedBack:require('@/static/icon/feedback@2x.png'),
				total:0
			}
		},
		methods: {
			async getMyList(obj) {
				//例如， {..obj,id:15}
				let res = await getSysUserCommentPage({
					...obj,
					...this.params
				})
				if(res.code == 200){
					this.total = res.total
				}
				return res
			},
			mySearch(val){
				this.params.searchValue = val
				this.clearPageStatus()
				this.getTeam()
				//console.log(val);
			},
			change(index){
				this.current = index;
				if(index == 0){
					this.params.state = 0
				}
				if(index == 1){  //差评，挪到中间
					this.params.state = 2
				}
				if(index == 2){  //差评，挪到中间
					this.params.state = 1
				}
				this.clearPageStatus()
				this.getTeam()
			},
			navTip(){
				this.tipsSw = true
				//console.log(123);
			},
			report(obj){
				uni.setStorageSync('feedback',obj)
				uni.navigateTo({
					url:`/pages/index/repulation/report`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.main{
	background-color: #f8f8f8;
	//overflow: hidden;
	//min-height: 100vh;
	.top_search{
		background-color: white;
		margin-top: 20rpx;
		//padding-top: 20rpx;
	}
	.nav{
		background-color: white;
		position: relative;
		.tip{
			position: absolute;
			top: 22rpx;
			left: 418rpx;
		}
	}
	.top_count{
		padding: 20rpx 24rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.card{
		background-color: white;
		margin-bottom: 20rpx;
		.name{
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 38rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:24rpx 24rpx 4rpx 24rpx ;
		}
		.time{
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			padding-left: 24rpx;
		}
		.content{
			padding: 40rpx 24rpx 30rpx 24rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #212121;
			line-height: 52rpx;
		}
		.start_time{
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx 24rpx 24rpx;
			.left_time{
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
			}
			.report{
				display: flex;
				width: 100rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #4DC0D9;
				line-height: 35rpx;
			}
		}
	}
	.job_empty {
		padding-top: 126rpx;
		min-height: 100vh;
		padding-bottom: 210rpx;
		display: flex;
		flex-direction: column;
		//justify-content: center;
		align-items: center;
	
		.empty_text {
			font-weight: 500;
			font-size: 36rpx;
			color: #C7C7C7;
			line-height: 1.5;
			text-align: center;
		}
	}
}
</style>
